<template>
    <!--空气监测-->
    <div class="air_monitoring">
        <div class="headtotle">
            <CustomGreenInitiativeCommonTotalNumber
                :totalList="state.totalList"
            ></CustomGreenInitiativeCommonTotalNumber>
        </div>
        <div class="SiderLeftAirQuality">
            <CustomGreenInitiativeSiderLeftAirQuality></CustomGreenInitiativeSiderLeftAirQuality>
        </div>
        <div class="SiderLeftcontent">
            <div>
                <CustomGreenInitiativeSiderLeftPollutionConcentration></CustomGreenInitiativeSiderLeftPollutionConcentration>
            </div>
            <div>
                <CustomGreenInitiativeSiderLeftConcentrationRatio></CustomGreenInitiativeSiderLeftConcentrationRatio>
            </div>
            <div>
                <CustomGreenInitiativeSiderLeftAirMonitoringCurve></CustomGreenInitiativeSiderLeftAirMonitoringCurve>
            </div>
            <div>
                <CustomGreenInitiativeSiderLeftMeteorologicalParameters></CustomGreenInitiativeSiderLeftMeteorologicalParameters>
            </div>
        </div>
        <div @click="analysisClick" class="traceability_analysis">
            <span>溯源分析</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import renderPopconfirmComponent from '@/components/common/Popconfirm';
import traceabilityParams from '../common/analysisParams.vue'

const analysisClick = () => {
     renderPopconfirmComponent({ title: '溯源分析参数',w:'30%', showPop: true }, traceabilityParams);
};

const state = reactive({
    totalList: {
        name: '大气监测站数量',
        numList: 10,
        unit: '个'
    }
});
</script>

<style scoped lang="scss">
.air_monitoring {
    height: 97%;

    .headtotle {
        height: 28px;
        margin-top: 8px;
    }

    .SiderLeftAirQuality {
        height: 11%;
    }

    .SiderLeftcontent {
        height: calc(89% - 83px);

        > div {
            &:nth-of-type(1) {
                height: 24%;
            }

            &:nth-of-type(2) {
                height: 24%;
            }

            &:nth-of-type(3) {
                height: 30%;
            }

            &:nth-of-type(4) {
                height: 22%;
            }
        }
    }

    .traceability_analysis {
        margin: 0 auto;
        margin-top: 12px;
        width: 270px;
        height: 35px;
        line-height: 35px;
        background: url('@/assets/image/traceabilityAnalysisback.png') no-repeat;
        background-size: 100% 100%;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #cdfafc;
        text-align: center;
        letter-spacing: 2px;
        cursor: pointer;
        span {
            padding-left: 5px;
        }
    }
}
</style>
